import React from 'react'
import {Route, withRouter } from 'react-router-dom';
import CategoryMode from './CategoryMode';
import {inject, observer} from 'mobx-react';
import QueueAnim from 'rc-queue-anim';

@inject('systemDocStore')
@withRouter
@observer
export default class CategoryRoute extends React.Component {
  render() {
    const {systemDocStore} = this.props;
    let {categoryStore} = systemDocStore;
    let urlPrefix = "/systemDoc";
    return (
      <div className="wea-system-doc-category">
        <Route
          key={`system-doc-category`}
          path={urlPrefix}
          render={() => {
            return (
              <QueueAnim>
                <div className="wea-system-doc-category-route" key={`system-doc-category-div`}>
                  {categoryStore.child && this.getRoute(categoryStore.child, urlPrefix)}
                  <CategoryMode store={categoryStore} path={urlPrefix}/>
                </div>
              </QueueAnim>
            );
          }}
        />
      </div>
    );
  }
  
  /**
   * 递归组成多个列表路由，用以实现返回上一级的功能。
   *
   * @param store
   * @param path
   * @returns {*}
   */
  getRoute = (store, path) => {
    const {category: {id}, child} = store;
    path = path + "/" + id;
    return (
      <Route
        key={`system-doc-category-${id}`}
        path={path}
        render={() => {
          return (
            <QueueAnim>
              <div className="wm-route-layout" key={`system-doc-category-${id}-div`}>
                {child && this.getRoute(child, path)}
                <CategoryMode store={store} path={path}/>
              </div>
            </QueueAnim>
          );
        }}
      />
    );
  }
}